<template>
  <div>
      <div class="topBtn">
            <div class="sizeBig"><span>公告管理</span></div>
            <div>
                <el-button type="primary" @click="addNotice"><i class="iconfont icon-addNew"></i> 查询</el-button>
                <el-button type="primary" icon="el-icon-edit" @click="checkChange">导出</el-button>
            </div>
        </div>
        <div class="message">
            <p class="character">1.按照产品工艺要求，在系统维护对应所有的生产工序，方便MES系统做流程节点管控和生产数据采集。 <span class="skip">查看帮助文档</span></p>
        </div>
        <div class="inputcontent">
            <el-input v-model="search" placeholder="请输入内容" class="inSearch"></el-input>
            <el-checkbox v-model="checked" style="margin-left:20px">显示已经使用的</el-checkbox>
            <div class="iconSearch"></div>
        </div>
        <div class="content">
          <h3 style="margin:0 0 20px 10px">物料信息</h3>
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" style="display:flex;flex-wrap: wrap;justify-content : space-between;width:90%">
            <el-form-item label="物料编码：">
              <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>
            <el-form-item label="物料名称：">
              <el-input v-model="formLabelAlign.region"></el-input>
            </el-form-item>
            <el-form-item label="物料类型：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="规格型号：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="照片尺寸：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="单位：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="单价：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="加页价：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="成本价：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="产品版本：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="版本说明：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="有效起始日期从：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="工序模版：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="备注：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
            <el-form-item label="状态：">
              <el-input v-model="formLabelAlign.type"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="content">
          <h3 style="margin:0 0 20px 10px">物料</h3>
          <Table></Table>
        </div>
        <div class="details">
          <el-collapse>
            <el-collapse-item>
              <template slot="title">
                <i class="header-icon el-icon-sort"></i>操作详情
              </template>
              <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
              <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
            </el-collapse-item>
          </el-collapse>
        </div>
  </div>
</template>

<script>
import Table from './components/bomTable'
export default { 
  name:'bom',
  data () {
    return {
      checked:true,
      formLabelAlign: {
          name: '',
          region: '',
          type: ''
        }
    }
  },
  components:{
    Table
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-form-item__content{
  margin-left: 130px !important;
}
/deep/ .el-form-item__label{
  width:130px !important;
}
/deep/ .el-form-item{
  width: 380px;
}
.sizeBig{
    font-size: 16px;
}
.topBtn{
    height: 60px;
    width: 98%;
    margin: 0 auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
}
.message{
    width:98%;
    margin: 0 auto;
    height:60px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(238,238,238,1);
    font-size:14px;
    .character{
        margin: 20px 0 21px 20px;
        color:#999999;
        .skip{
            color: #0095FF;
            margin-left:10px;
            cursor:pointer; 
        }
    }
}
.inputcontent{
    width:98%;
    margin: 0 auto;
    height: 80px;
    position: relative;
    padding-top:21px;
    box-sizing: border-box; 
    .iconSearch{
        position: absolute;
        left: 277px;
        top:30px;
        width:20px;
        height: 20px;
        background-image: url('./image/搜索.png') ;
        background-repeat: no-repeat;
        cursor:pointer; 
    }
    .inSearch{
        width:308px;
        height:40px;
    }
}
.content{
    width:96%;
    margin: 0 auto;
}
.details{
  width: 96%;
  margin: 20px auto 50px;
}
/deep/ .el-collapse-item__header{
  color:#0095FF;
}
.header-icon{
  margin: 0 5px 0 10px;
}
</style>